<template>
  <div>
    <template v-for="(btn,index) in btnArray">
      <template v-if="btn.type === 'delete'">
        <el-popover
          :key="index"
          v-model="pop"
          v-permission="btn.permission"
          trigger="manual"
          placement="top"
          width="180"
          class="his-button"
          @show="onPopoverShow"
          @hide="onPopoverHide"
        >
          <p>{{ msg }}</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="doCancel">取消</el-button>
            <el-button :loading="crud.dataStatus[data.id].delete === 2" type="primary" size="mini" @click="crud.doDelete(data)">确定</el-button>
          </div>
          <el-button slot="reference" :disabled="disabledDle" type="danger" icon="el-icon-delete" size="mini" @click="toDelete" />
        </el-popover>
      </template>
      <template v-else>
        <el-button
          v-if="!btn.name"
          :key="index"
          v-permission="btn.permission"
          :disabled="disabledEdit"
          class="his-button"
          size="mini"
          type="primary"
          icon="el-icon-edit"
          @click="handleClick(btn)"
        />
        <el-button
          v-else
          :key="index"
          v-permission="btn.permission"
          :disabled="disabledEdit"
          class="his-button"
          size="mini"
          type="text"
          @click="handleClick(btn)"
        >
          {{ btn.name }}
        </el-button>
      </template>
    </template>
    <slot name="right" />
  </div>
</template>
<script>
import CRUD, { crud } from '@crud/crud'
export default {
  mixins: [crud()],
  props: {
    data: {
      type: Object,
      required: true
    },
    /**
     *{
     * name         按钮名称(存在时以文本的形式显示)
     * type         按钮类型(必填项,add、edit、delete、download)
     * position     按钮位置(0-全部,1-top,2-right,默认0)
     * permission   按钮权限(['admin','user:add'])
     * handleClick  点击事件处理
     * params       点击事件参数
     *}
     */
    permissions: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    disabledEdit: {
      type: Boolean,
      default: false
    },
    disabledDle: {
      type: Boolean,
      default: false
    },
    msg: {
      type: String,
      default: '确定删除本条数据吗？'
    }
  },
  data() {
    return {
      pop: false
    }
  },
  computed: {
    btnArray() {
      const res = this.permissions.filter(item => {
        return !item.position || item.position === 2
      })
      return res
    }
  },
  methods: {
    doCancel() {
      this.pop = false
      this.crud.cancelDelete(this.data)
    },
    toDelete() {
      this.pop = true
    },
    [CRUD.HOOK.afterDelete](crud, data) {
      if (data === this.data) {
        this.pop = false
      }
    },
    onPopoverShow() {
      setTimeout(() => {
        document.addEventListener('click', this.handleDocumentClick)
      }, 0)
    },
    onPopoverHide() {
      document.removeEventListener('click', this.handleDocumentClick)
    },
    handleDocumentClick(event) {
      this.pop = false
    },
    handleClick(btn) {
      const handleClick = btn.handleClick
      let handleFun = null
      let target = this
      let params = []
      const crud = this.crud

      if (handleClick) {
        handleFun = this._getHandleClick(this.$parent, handleClick)
        params = btn.params || []
        params.splice(0, 0, this.data)
        target = this.$parent
      } else {
        switch (btn.type) {
          case 'edit':
            handleFun = crud.toEdit
            target = crud
            params.push(this.data)
            break
        }
      }

      handleFun.apply(target, params)
    },
    _getHandleClick(parent, funName) {
      const res = parent[funName]
      if (res) {
        return res
      } else {
        return this._getHandleClick(parent.$parent, funName)
      }
    }
  }
}
</script>
